<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2023/4/25
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <title>试题管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css" media="all">

</head>
<body>

<script type="text/html" id="edit_form">

</script>
<form class="layui-form" action=""  id="saveUserForm" lay-filter="updateUserFormFilter" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label" >编号</label>
        <div class="layui-input-block">
            <input type="text" name="scl_no"  id="scl_no" required  lay-verify="required" placeholder="请输入题目编号" autocomplete="off" class="layui-input"  lay-filter="scl_no">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <input type="text" name="scl_content" id="scl_content" required  lay-verify="required" placeholder="请输入题目内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSaveUser">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<div style="margin-bottom: 20px;">
    <form >
        <label>
            <input type="text" name="name" id="name">
        </label>
        <label for="query_scl"></label><select id="query_scl" name="query_scl">
        <option value="scl_no">题目编号</option>
        <option value="scl_content">题目内容</option>
    </select>
        <label>
            <button onclick="query_scl1()">查询</button>
        </label>
    </form>
</div>

<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="upload" id="uploadExcel">Excel批量导入</button>
    <button class="layui-btn" data-type="getCheckData">删除选中行</button>
    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
    <button class="layui-btn" data-type="isAll">验证是否全选</button>
    <button class="layui-btn" data-type="addDate">添加</button>
</div>

<table id="demotest" class="layui-table" lay-data="{url: '${pageContext.request.contextPath}/Scl?method=findAll',
               page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    , curr: 1 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页
                }}"  lay-filter="demotest">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
        <th lay-data="{field:'scl_id', width:80, sort: true, fixed: true}">id</th>
        <th lay-data="{field:'scl_no', width:80, sort: true, fixed: true}">编号</th>
        <th lay-data="{field:'scl_content', width:180}">内容</th>
        <th lay-data="{field:'scl_appraise', width:80, sort: true}">评分</th>
        <th lay-data="{field:'createdate', width:180}">创建时间</th>
        <th lay-data="{field:'updatetime', width:180}">修改时间</th>
        <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>




<script>
    layui.use(['table','form','upload'], function(){
        var table = layui.table;
        var form = layui.form;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demotest)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.get("${pageContext.request.contextPath}/Scl?method=del"
                        ,{"scl_id":data.scl_id},function (num){
                            if(num!=="0"){
                                obj.del();
                                layer.close(index);
                            }
                        })
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    title: '修改题目',
                    type: 1,
                    content: $('#saveUserForm'),
                    area: ['500px', '300px']
                });
                form.val('updateUserFormFilter', {
                    "scl_no":data.scl_no
                    ,"scl_content": data.scl_content

                });
                form.on('submit(formSaveUser)', function(data){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/Scl?method=update",
                        dataType:"JSON",
                        data:{
                            "scl_id":obj.data.scl_id
                            ,"scl_no":$("#scl_no").val()
                            ,"scl_content":$("#scl_content").val()
                        },
                        success:function (ret) {

                            if(ret.code===0){
                                layer.closeAll();
/*                                table.reload('demotest', {
                                    page: {
                                        curr: 1
                                    } //重新从第 1 页开始
                                });*/
                            }
                            //layer.msg(ret.message);
                        }
                    });
                    table.reload('demotest', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可
                });
                layui.form.on('submit(name)', function(data){
                    alert(1111)
                });
            }
        });

        var $ = layui.$, active = {
            upload:function (){
                var upload = layui.upload;
                //上传组件
                upload.render({
                    elem: '#uploadExcel'
                    ,url: '${pageContext.request.contextPath}/Scl?method=upload' //上传接口
                    ,accept: 'file' //允许上传的文件类型
                    //,acceptMime:'xlsx'
                    ,exts:'xlsx'
                    ,done: function(res){
                        //上传完毕回调
                        if(res.code===0)
                        {
                            layer.msg("上传成功");

                        }else
                        {
                            layer.alert(res.msg);
                        }
                    }
                    ,error: function(){
                        //请求异常回调
                    }
                });
            }
            ,getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                let list=[];
                for (let i = 0; i < data.length; i++) {
                    list.push(data[i].id);
                }
                //layer.alert(JSON.stringify(data));
                //layer.alert(JSON.stringify(list));
                $.get("${pageContext.request.contextPath}/ShowServlet?method=delAll",{"list":JSON.stringify(list)},function (sname){
                    if(sname>0){
                        layer.alert("删除成功");
                    }
                })
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
            ,addDate:function (){
                layer.open({
                    title: '添加',
                    type: 1,
                    content: $('#saveUserForm'),
                    area: ['500px', '300px']
                });
                form.val('updateUserFormFilter', {
                    "scl_no":""
                    ,"scl_content":""
                });

                form.on('submit(formSaveUser)', function(data){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/Scl?method=addScl",
                        dataType:"JSON",
                        data:{
                            "scl_no":$("#scl_no").val()
                            ,"scl_content":$("#scl_content").val()
                        },
                        success:function (ret) {

                            if(ret.code===0){

                                 layer.closeAll();

                            }

                        }
                    });
                    table.reload('demotest', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    },true);
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    function query_scl1(){
        $.ajax({
            url:"${pageContext.request.contextPath}/Scl?method=query_scl",
            dataType:"JSON",
            data:{
                "name":$("#name").val()
                ,"type":$("#query_scl").val()
            },
            success:function (ret) {

                if(ret.code===0){

                    layer.closeAll();

                }

            }
        });
    }

</script>

</html>
